import React from 'react'
import './details.css'
import images from './assets/images'
import { Skeleton } from 'react-vant';
import { useNavigate } from 'react-router-dom';
export default function Details() {
    const navigate = useNavigate()
    const name = localStorage.getItem('name')
    const address = localStorage.getItem('address')
    const tou = () => {
        localStorage.setItem('name', name)
    }
    return (
        <div>
            <div style={{ backgroundColor: '#8FDA93' }}>
                <p style={{ color: 'white' }} onClick={() => { navigate('/') }}>{name}</p>
                <p style={{ color: 'white' }}>{address}</p>
                <div style={{ width: '90%', backgroundColor: 'white', height: '200px', textAlign: 'center', lineHeight: '80px', margin: 'auto', marginTop: '15px' }}>
                    <div style={{ display: 'flex' }} className='box'>
                        <div style={{ display: 'flex', flexFlow: 'column', alignItems: 'center', width: '30%' }}>
                            <img src={images.img2} width={50} height={50} alt="" />
                            <div style={{ position: 'relative', bottom: '20px' }} onClick={() => { navigate('/school') }}>学校信息</div>
                        </div>
                        <div style={{ display: 'flex', flexFlow: 'column', alignItems: 'center', width: '30%' }}>
                            <img src={images.img2} width={50} height={50} alt="" />
                            <div style={{ position: 'relative', bottom: '20px' }} onClick={() => { navigate('/student') }}>学生食谱</div>
                        </div>
                        <div style={{ display: 'flex', flexFlow: 'column', alignItems: 'center', width: '30%' }}>
                            <img src={images.img2} width={50} height={50} alt="" />
                            <div style={{ position: 'relative', bottom: '20px' }} onClick={() => { navigate('/Acceptance') }}>抽检公示</div>
                        </div>
                        <div style={{ display: 'flex', flexFlow: 'column', alignItems: 'center', width: '30%' }} onClick={() => { navigate('/ingredient') }}>
                            <img src={images.img2} width={50} height={50} alt="" />
                            <div style={{ position: 'relative', bottom: '20px' }}>食材供应商</div>
                        </div>
                    </div>
                    <div style={{ display: 'flex' }} className='box'>
                        <div style={{ display: 'flex', flexFlow: 'column', alignItems: 'center', width: '30%' }}>
                            <img src={images.img2} width={50} height={50} style={{ position: 'relative', bottom: '15px' }} alt="" />
                            <div style={{ position: 'relative', bottom: '30px' }} onClick={() => { navigate('/person') }}>人员健康证</div>
                        </div>
                        <div style={{ display: 'flex', flexFlow: 'column', alignItems: 'center', width: '30%' }}>
                            <img src={images.img2} width={50} height={50} style={{ position: 'relative', bottom: '15px' }} alt="" />
                            <div style={{ position: 'relative', bottom: '30px' }} onClick={() => { navigate('/yang') }}>营养搭配</div>
                        </div>
                        <div style={{ display: 'flex', flexFlow: 'column', alignItems: 'center', width: '30%' }}>
                            <img src={images.img2} width={50} height={50} style={{ position: 'relative', bottom: '15px' }} alt="" />
                            <div style={{ position: 'relative', bottom: '30px' }} onClick={() => { navigate('/Hygiene') }}>卫生检查</div>
                        </div>
                        <div onClick={() => { tou() }} style={{ display: 'flex', flexFlow: 'column', alignItems: 'center', width: '30%' }}>
                            <img src={images.img2} width={50} height={50} style={{ position: 'relative', bottom: '15px' }} alt="" />
                            <div style={{ position: 'relative', bottom: '30px' }} onClick={() => { navigate('/complaintRreport') }}>投诉建议</div>
                        </div>
                    </div>
                </div>
            </div>
            <img src={images.img1} style={{ width: '100%', marginTop: '20px' }} alt="" />
            <h3>餐饮服务信息公布</h3>
            <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '20px' }}>
                <div style={{ width: '250px', height: '150px', backgroundColor: '#8EDA93', color: 'white', textAlign: 'center' }}><h3>健康证明</h3><Skeleton rowHeight={10} style={{ marginTop: '10px' }} /></div>
                <div style={{ width: '250px', height: '150px', backgroundColor: '#8EDA93', color: 'white', textAlign: 'center' }}><h3>健康证明</h3><Skeleton rowHeight={10} style={{ marginTop: '10px' }} /></div>
            </div>
        </div>
    )
}